<template>
  <el-drawer
    width="100%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :title="dialogTitle"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider />
    <div class="treeStyle" v-loading="loading">
      <div style="display: flex">
        <el-icon style="color: orange; font-size: 45px"><Warning /></el-icon>
        <div style="text-align: left; margin-left: 10px">
          <div style="color: orange">演示版不能分配【超级管理员】角色。</div>
          <div style="color: orange">
            上级角色会继承下级角色的权限，分配时请注意
          </div>
        </div>
      </div>
      <el-tree
        :data="roleList"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-checked-keys="defaultRole"
        show-checkbox
        :check-strictly="true"
        ref="roleTree"
        width="100%"
        node-key="key"
        :props="defaultProps"
      >
        <template #default="{ node, data }">
          <div class="custom-node">
            <el-icon color="#67C23A" v-if="data.disabled && data.key != 1">
              <Histogram
            /></el-icon>
            <el-icon
              color="#67C23A"
              v-if="data.disabled === false || data.key == 1"
            >
              <Avatar
            /></el-icon>
            <span>&nbsp;{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <div style="position: relative; top: 10px">
        <el-button
          icon="Close"
          size="large"
          type="danger"
          plain
          @click="handleClose"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="large"
          icon="Check"
          plain
          @click="getCheckedValues"
          >保存</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>
  <script  lang="ts">
import {
  ref,
  defineComponent,
  PropType,
  computed,
  reactive,
} from "vue";
import { ElMessage } from "element-plus";
import { treeOutPut } from "@/model/public/treeModel";
import { UserRoleInput } from "@/model/public/public";
import { getRoleTree } from "@/api/role";
import { SysUser } from "@/model/user/user";
import { getUserRole, setUserRole } from "@/api/user";
import { useUserStore } from "@/store/user";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysUser>,
      required: true,
    },
  },

  setup(props, context) {
    //加载状态
    const loading = ref(true);
    //系统角色数据
    const roleList = ref<treeOutPut[]>([]);
    //角色树
    const roleTree = ref();
    //默认角色
    const defaultRole = ref<number[]>([]);
    //用户和角色关系
    const userRoleInput = reactive<UserRoleInput>({
      UserId: "0",
      RoleId: [],
    });

    //打开时加载
    const handleDialogOpen = function () {
      loading.value = true;
      getRoleTreeMsg(props.modelData.CorporationKey);
      getUserRoleMsg();
    };

    //获取公司下系统角色
    const getRoleTreeMsg = function (corporationKey: string) {
      if (corporationKey === "" || corporationKey === undefined) {
        ElMessage({
          message: "公司不能为空",
          type: "warning",
        });
        return;
      }
      //获取公司下系统角色
      getRoleTree({
        corporationKey,
      })
        .then(({ data, code }) => {
          if (code == 200) {
            roleList.value = data;
          }
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    };

    //获取用户默认角色
    const getUserRoleMsg = function () {
      defaultRole.value = [];
      getUserRole({ userId: props.modelData.UserId }).then(
        ({ data, code, msg }) => {
          if (code == 200) {
            defaultRole.value = data;
          }
        }
      );
    };

    //获取tree选中节点
    const getCheckedValues = () => {
      const checkedNodes = roleTree.value.getCheckedKeys();
      if (props.modelData.UserId === "0") {
        ElMessage({
          message: "用户错误",
          type: "warning",
        });
        return;
      }
      // if (checkedNodes.length > 0) {
        userRoleInput.UserId = props.modelData.UserId;
        userRoleInput.RoleId = checkedNodes;
        setUserRole(userRoleInput).then(({ data, code, msg }) => {
          if (code == 200) {
            // useUserStore().loadMenus(); //刷新菜单
            handleClose();
            ElMessage({
              message: msg,
              type: "success",
            });
          }
        });
      // } else {
      //   ElMessage({
      //     message: "请选择角色",
      //     type: "warning",
      //   });
      //   return;
      // }
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
    };

    //树形菜单默认处理
    const defaultProps = {
      children: "children",
      label: "label",
      //设置属于下级角色的菜单，不能勾选
      disabled(data: treeOutPut) {
        if (data.disabled === true) {
          return true;
        }
      },
      class(data: treeOutPut) {
        if (data.disabled === true && data.key !== "1") {
          return "user-role-style"; //设置用户角色样式
        }
      },
    };

    return {
      handleClose,
      dialogVisibled,
      handleDialogOpen,
      roleList,
      getCheckedValues,
      roleTree,
      defaultRole,
      defaultProps,
      loading,
    };
  },
  components: {},
});
</script>
      
      <style scoped>
.treeStyle {
  margin: 10px;
  max-height: 80%;
  overflow-y: auto;
}
</style>